"use client";
import { useEffect, useRef, useState } from 'react'
import {clsx} from 'clsx'
import {motion,useInView} from 'framer-motion'
import {IoIosMenu,IoIosClose} from 'react-icons/io'

export default function Page () {

  const [isOpen, setIsOpen] = useState(false)


  return (
   <nav className={"w-full bg-blue-600"}>
     <section className={"h-20 w-10/12 mx-auto font-mono text-white flex items-center gap-x-3"}>
        <a className={"text-4xl px-5 py-3 hover:translate-x-5 duration-300"} href={""}>Tailwind</a>
       <ul className={"hidden md:flex gap-x-5 mx-3 items-center"}>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer"}><a href={""}>React</a></li>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer"}><a href={""}>Vue</a></li>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer"}><a href={""}>Zod</a></li>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer"}><a href={""}>Bootstrap</a></li>
       </ul>

       <form className={"hidden xl:block"} action="">
         <input className={"px-5 py-2 outline-none rounded caret-blue-800 text-blue-800 hover:scale-x-105 duration-300"} placeholder={"Go"} type="text"/>
       </form>

       <ul className={"hidden lg:flex items-center ml-auto mx-3"}>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer"}>
           <a className={"underline underline-offset-[6px]"} href={""}>Login</a>
         </li>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer"}><a href={""}>Register</a></li>
       </ul>

       <button className={"ml-auto md:hidden px-5 py-3 rounded bg-blue-800"} onClick={()=> setIsOpen(!isOpen)}>
          <IoIosMenu className={"text-2xl"}></IoIosMenu>
       </button>
     </section>

     <div className={clsx("md:hidden h-screen w-[60%] bg-blue-500 fixed top-0 duration-300 shadow-[-5px_0_5px_rgba(54,98,227,.6)]", isOpen ? "right-0" : "-right-full")}>
       <ul className={"h-full my-5 w-10/12 mx-auto text-white flex flex-col"}>
         <li className={"text-right"}>
           <button className={"px-3 rounded group"} onClick={()=> setIsOpen(!isOpen)}>
             <IoIosClose className={"text-4xl text-white/50 group-hover:text-white"}/>
           </button>
         </li>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer duration-300"}><a href={""}>React</a></li>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer duration-300"}><a href={""}>Vue</a></li>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer duration-300"}><a href={""}>Zod</a></li>
         <li className={"p-3 hover:bg-blue-900/50 cursor-pointer duration-300"}><a href={""}>Bootstrap</a></li>
       </ul>
     </div>

   </nav>
  )
}
